<template>
  <div>
    <!-- 导航栏 -->
    <van-nav-bar title="修改个人信息" left-arrow @click-left="onClickLeft"/>

    <!-- 个人信息修改表单 -->
    <van-form @submit="onSubmit">
      <van-field label="姓名" v-model="user.nickname"/>
      <van-field label="手机号" v-model="user.phone"/>
      <van-field label="身份证号" v-model="user.idCard"/>
      <van-field label="学号" disabled v-model="user.username"/>
      <van-field label="学院" readonly clickable @click="openDepartmentWindow()" v-model="user.departmentName"/>
      <van-field label="专业" readonly clickable @click="openMajorWindow()" v-model="user.majorName"/>
      <van-field label="班级" v-model="user.stuClass"/>
      <van-field label="性别">
        <template #input>
          <van-radio-group v-model="user.sex" direction="horizontal">
            <van-radio :name="1">男</van-radio>
            <van-radio :name="0">女</van-radio>
          </van-radio-group>
        </template>
      </van-field>
      <van-field label="入学时间" v-model="user.enrTime" @click="dateVisible = true"/>
      <div style="margin: 16px;">
        <van-button round block type="info" native-type="submit" color="#1baeae">修改个人信息</van-button>
      </div>
    </van-form>

    <!-- 学院弹出层 -->
    <van-popup v-model="departmentDialog.visible" round position="bottom">
      <van-picker :title="departmentDialog.title" show-toolbar :columns="departmentDialog.list" :value-key="departmentDialog.key" @cancel="departmentDialog.visible = false" @confirm="onDepartmentConfirm"/>
    </van-popup>

    <!-- 日期选择 -->
    <van-calendar v-model="dateVisible" @confirm="onDateConfirm" />
  </div>
</template>

<script>
import {getDepartments, getInfo, getMajorsByDepartmentId, modifyUser} from "@/api/user";
import { Notify } from 'vant';

export default {
  name: "index",
  data(){
    return{
      user:{
        id:'', // 用户编号
        nickname:'', // 用户名称
        phone:'', // 手机号
        idCard:'', // 身份证号码
        username:'', // 学号
        departmentName:'', // 学院名称
        departmentId:'', // 学院id
        majorName:'', // 专业名称
        majorId:'', // 专业id
        stuClass:'', // 班级
        enrTime:'', // 入学时间
        sex:'' // 性别
      },
      // 学院选中弹出层
      departmentDialog:{
        title:'', // 标题
        visible:false, // 是否展示
        list:[], // 数据
        key:'' // 要展示的字段名
      },
      dateVisible:false, // 日期是否显示
    }
  },
  created() {
    this.getUserInfo();
  },
  methods:{
    /**
     * 返回设置页面
     * */
    onClickLeft(){
      this.$router.push("/user/setting")
    },
    /**
     * 发送修改个人信息请求
     * */
    async onSubmit(values) {
      let res = await modifyUser(this.user)
      Notify({ type: 'success', message: res.message });
    },
    /**
     * 获取用户信息
     * */
    async getUserInfo() {
      let res =  await getInfo();
      this.user = res.data
    },
    /**
     * 打开学院弹出层
     * */
    async openDepartmentWindow(){
      // 获取所有学院
      let res = await getDepartments()
      this.departmentDialog.list = res.data
      this.departmentDialog.title = '学院信息';
      this.departmentDialog.key = 'departmentName';
      this.departmentDialog.visible = true;
    },
    /**
     * 打开专业弹出层
     * */
    async openMajorWindow(){
      // 获取当前学院下的专业
      let res = await getMajorsByDepartmentId(this.user.departmentId);
      this.departmentDialog.list = res.data
      this.departmentDialog.title = '学院信息';
      this.departmentDialog.key = 'majorName';
      this.departmentDialog.visible = true;
    },
    /**
     * 学院弹出层的确认事件
     * */
    onDepartmentConfirm(value){
      if (value.departmentName){
        // 将学院的值进行赋值
        this.user.departmentId = value.departmentId;
        this.user.departmentName = value.departmentName;
        this.user.majorId = '';
        this.user.majorName = '';
      }else {
        // 将专业的值进行赋值
        this.user.majorId = value.majorId;
        this.user.majorName = value.majorName;
      }
      this.departmentDialog.visible = false;
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },
    /**
     * 日期确认事件
     * */
    onDateConfirm(value){
      this.dateVisible = false;
      this.user.enrTime = this.formatDate(value);
    }
  }
}
</script>

<style scoped lang="scss">

</style>
